<template>
  <div ref="refContent" class="type-filter">
    <div class="now-type" @click="menuShow = !menuShow">
      <span>
        {{ nowTypeName }}
      </span>
      <img src="@/assets/icon/icon-down.png" :class="{ reverse: menuShow }" />
    </div>
    <div class="menus" v-if="menuShow">
      <div
        v-for="item in ITEM_LIST"
        :key="item.name"
        class="menu-item"
        :class="{ active: item.value == nowType }"
        @click="handleClickItem(item)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { onClickOutside } from '@vueuse/core'
import { VIDEO_TYPE_LIST as ITEM_LIST } from '../constants.ts'

const props = defineProps<{
  nowType: string | null
}>()

const emit = defineEmits<{
  (e: 'change', type: NullAble<string>): void
}>()

const nowTypeName = computed(() => {
  const i = ITEM_LIST.find(item => item.value == props.nowType)
  if (i.value == null) return '全部类型'
  return i?.name
})

const menuShow = ref(false)
const refContent = ref<NullAble<HTMLElement>>()
onClickOutside(refContent, () => {
  menuShow.value = false
})

const handleClickItem = item => {
  emit('change', item.value)
  menuShow.value = false
}
</script>

<style lang="less" scoped>
.type-filter {
  // margin-left: 10px;
  z-index: 99;
  height: 52px;
  font-size: 14px;
  position: relative;
  .now-type {
    font-weight: medium;
    height: 100%;
    display: flex;
    align-items: center;
    img {
      margin-left: 6px;
      width: 7.2px;
      height: 5.4px;
    }
  }

  .reverse {
    transform: rotate(180deg);
  }

  .menus {
    position: absolute;
    width: 94px;
    left: 0px;
    top: 42px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0px 2px 5px 0px #00000026;
    .menu-item {
      text-align: center;
      font-weight: medium;
      padding: 9px;

      &.active {
        color: #3a75c5;
      }
    }
  }
}
</style>
